<template>
  <div class="container">
    <el-card shadow="always">
      <!-- 文字说明--新增试题 -->
      <div class="btn_wrapper">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" size="small" class="btn" @click="$router.push('new')">新增试题</el-button>
      </div>
      <!-- 搜索目录模块 -->
      <el-form :ref="form">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select size="small" v-model="form.subjectID" @change="changeitem">
                <el-option v-for="(item, index) in subjectsList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select placeholder="请选择" size="small" v-model="form.catalogID">
                <el-option v-for="(item, index) in secondLevelList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select placeholder="请选择" size="small" v-model="form.tags">
                <el-option v-for="(item, index) in labelList" :key="index" :label="item.tagName" :value="item.tagName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input placeholder="根据题干搜索" v-model="form.keyword" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select placeholder="请选择" size="small" v-model="form.questionType">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select placeholder="请选择" size="small" class="inp" v-model="form.difficulty">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select placeholder="请选择" size="small" v-model="form.direction">
                <el-option label="o2o" value="o2o"></el-option>
                <el-option label="外包服务" value="外包服务"></el-option>
                <el-option label="互联网金融" value="互联网金融"></el-option>
                <el-option label="企业咨询" value="企业咨询"></el-option>
                <el-option label="互联网" value="互联网"></el-option>
                <el-option label="电子商务" value="电子商务"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select placeholder="请选择" size="small" v-model="form.creatorID">
                <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" class="citys">
              <el-select size="small" v-model="form.city" class="city" @change="changeCity">
                <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              <el-select size="small" v-model="form.province" class="city">
                <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <div>
                <el-button size="small" @click="clearFrom">清除</el-button>
                <el-button size="small" type="primary" @click="getTableList">搜索</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab导航栏 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"><choice-tabeitem :tableList="tableList" :subjectsList="subjectsList" :counts="total" @editDel="del()"/></el-tab-pane>
        <el-tab-pane label="待审核" name="0"><choice-tabeitem :tableList="tableList" :subjectsList="subjectsList" :counts="total" @editDel="del()"/></el-tab-pane>
        <el-tab-pane label="已审核" name="1"><choice-tabeitem :tableList="tableList" :subjectsList="subjectsList" :counts="total" @editDel="del()"/></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"><choice-tabeitem :tableList="tableList" :subjectsList="subjectsList" :counts="total" @editDel="del()"/></el-tab-pane>
      </el-tabs>
      <!-- 文字提示 -->
      <div class="page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="queryInfo.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import choiceTabeitem from '../components/choice-tabitem'
import { simple } from '@/api/hmmm/subjects.js'
import { Usersimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice } from '@/api/hmmm/questions'
import { simple as directory } from '@/api/hmmm/directorys' //  二级目录
import { list as tag } from '@/api/hmmm/tags' //  标签
export default {
  data() {
    return {
      // 查询条件
      queryInfo: {
        query: '',
        page: 1,
        pagesize: 10
      },
      form: {
        // subjectID: '', // 学科
        // catalogID: '', // 二级目录
        // tags: '', // 标签
        // keyword: '', // 关键字
        // questionType: '', // 试题类型
        // difficulty: '', // 难度
        // direction: '', // 方向
        // remarks: '', // 题目备注
        // shortName: '', // 企业简称
        // province: '', // 城市
        // city: '', //  省
        // creatorID: '',// 录入人
      },
      activeName: 'all',
      total: 0,
      currentPage4: 0,
      subjectsList: [], // 学科列表
      userList: [],
      provinces: [],
      citys: [],
      tableList: [],
      secondLevelList: [],
      labelList: [] // 标签
    }
  },
  created() {
    this.getSubjectList()
    this.getUserList()
    this.getcity()
    this.getTableList()
  },
  components: {
    choiceTabeitem
  },
  methods: {
    handleClick() {
      // 切换选项卡
      if (this.activeName !== 'all') {
        this.form.chkState = this.activeName - 0
      } else {
        this.form.chkState = null
      }
      this.getTableList()
    },
    async getSubjectList() {
      const { data } = await simple()
      this.subjectsList = data
    },
    async getTableList() {
      const { data } = await choice(this.form)
      this.tableList = data.items
      this.total = data.counts
      // this.queryInfo.page = parseInt(data.page)
      // this.queryInfo.pagesize = parseInt(data.pagesize)
      // console.log(this.tableList)
      // console.log(this.total)
    },
    async getUserList() {
      // 获取用户信息
      const { data } = await Usersimple()
      this.userList = data
      // console.log(123, this.userList)
      // console.log(123)
    },
    getcity() {
      // 获取市区
      this.provinces = provinces()
    },
    changeCity() {
      // 获取城市
      this.citys = citys(this.form.city)
    },
    clearFrom() {
      // 重置表单
      ;(this.queryInfo = {
        page: 1,
        pagesize: 3
      }),
        (this.form = [])
      this.getTableList()
    },
    handleSizeChange(val) {
      // 分页大小变化
      this.queryInfo.pagesize = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      // 换页
      this.queryInfo.page = val
      this.getTableList()
    },
    del() {
      this.getTableList()
    },
    // 学科改变列表
    async changeitem(value) {
      if (this.form.subjectID) {
        // 二级目录
        const { data } = await directory({
          subjectID: value
        })
        this.secondLevelList = data
        // 标签
        const { data: res } = await tag({
          subjectID: value
        })
        this.labelList = res.items
      } else {
        this.secondLevelList = []
        this.labelList = []
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  padding: 20px;
  margin: 10px 10px;
  background-color: #ffffff;
}
.btn_wrapper {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.explain {
  font-size: 12px;
  color: pink;
}
.btn {
  border-radius: 3px;
  font-size: 12px;
}
.el-form-item {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  float: right;
  font-size: 14px;
  margin-bottom: 18px;
}
.el-select {
  width: 335px;
}
.el-input {
  width: 335px;
}
.el-alert {
  margin-bottom: 15px;
}
.city {
  width: 157px;
}
.citys {
  display: flex;
  justify-content: space-between;
}
.page {
  text-align: right;
  .el-pagination__jump {
    margin: 0;
  }
}
</style>
